<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui-v2.9.0/layui/css/layui.css" media="all">
    <script src="../layui-v2.9.0/layui/layui.js"></script>
</head>
<body>

<div style="width: 1400px">
<!--    顶部导航栏-->
    <div class="layui-col-xs10 layui-col-xs-offset1"  >

        <ul class="layui-nav layui-bg-gray" >
            <li class="layui-nav-item left-nav layui-col-xs2">
                <!-- 品牌logo位置 -->
                <div class="nav-profile">
                    <!-- 图像使用div包裹，设置相对定位 -->
                    <div class="nav-profile-img" style="margin-left: 20px;">
                        <img class="logo_img" src="../img/热趣部落.png" style="transform: scale(1.5);" alt="加载中"/>
                    </div>
                    <!-- 用户名链接 -->
                    <a href="#" style="color: black;">热趣部落</a>
                </div>
            </li>
            <li class="layui-nav-item layui-this layui-col-xs1"><a href="/indexPage">首页</a></li>
            <li class="layui-nav-item layui-col-xs1"><a href="">热点</a></li>
            <li class="layui-nav-item layui-col-xs1">
                <a href="javascript:;">模块</a>
                <dl class="layui-nav-child">
                    <dd><a href="">趣点模块</a></dd>
                    <dd><a href="">动态模块</a></dd>
                    <dd><a href="">个人信息模块</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item "><a href="">关于</a></li>
<!--            个人信息接口-->
            <li class="layui-nav-item layui-col-xs2" style="float: right">
                <div class="nav-profile">
                    <div class="nav-profile-img" style="margin-left: 20px;">
                        <img class="layui-nav-img" src="../img/img1.png" style="transform: scale(1.5);" alt="加载中"/>
                    </div>
                    <!-- 用户名链接 -->
                    <a href="javascript:;" style="color: black;">张三</a>
                    <dl class="layui-nav-child" style="text-align: center">
                        <dd><a href="">个人信息</a></dd>
                        <dd><a href="">我的好友</a></dd>
                        <dd >
                            <div >
                                 <a href=""> <i class="layui-icon layui-icon-logout"></i> 退出登录</a>
                            </div>
                        </dd>
                    </dl>
                </div>
            </li>
        </ul>
    </div>

    <!--    侧边导航栏-->
    <div class="layui-col-xs2 layui-col-xs-offset1 layui-bg-gray" style="top: 10px;height:auto">
        <div class="layui-bg-gray" style="height:auto">
            <div >
                <h3 style="text-align: center" class="mbx">分类</h3>
                <hr>
                <span class="layui-breadcrumb span_css" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index1">首页</a>
                      <a href="" class="a_index1">国际新闻</a>
                    </p>
                    <p class="p_index">
                  <a href="" class="a_index1">亚太地区</a>
                  <a><cite>正文</cite></a>
                    </p>
                </span>
            </div>
            <div>
                <h3 style="text-align: center" class="mbx">门户频道</h3>
                <hr>
                <span class="layui-breadcrumb span_css" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index1">娱乐</a>
                      <a href="" class="a_index1">八卦</a>
                      <a href="" class="a_index1">体育</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index1">搞笑</a>
                      <a href="" class="a_index1">视频</a>
                      <a href="" class="a_index1">游戏</a>
                    </p>
                    <p class="p_index">
                        <a href="" class="a_index1">综艺</a>
                    </p>
                </span>
            </div>

            <!--        贴吧分类-->
            <div style="margin-top: 30px">
                <h6>趣点分类 </h6>  <hr>
            </div>
            <div class="div_index">
                <i class="layui-icon layui-icon-rate-solid"></i> 娱乐明星
                <span class="layui-breadcrumb" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index3">网络红人</a>
                      <a href="" class="a_index3">娱乐明星</a>
                      <a href="" class="a_index3">导演</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index3">时尚人物</a>
                      <a href="" class="a_index3">明星</a>
                      <a href="" class="a_index3">粉丝组织</a>
                    </p>
                </span>
            </div>
            <hr>
            <div class="div_index">
                <img class="img-index" src="../img/体育.png" alt="!"> 体育
                <span class="layui-breadcrumb" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index4">足球</a>
                      <a href="" class="a_index4">篮球</a>
                      <a href="" class="a_index4">乒乓球</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index4">网球</a>
                      <a href="" class="a_index4">舞蹈</a>
                      <a href="" class="a_index4">健身</a>
                    </p>
                </span>
            </div>
            <hr>
            <div class="div_index">
                <img class="img-index" src="../img/游戏.png" alt="!"> 游戏
                <span class="layui-breadcrumb" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index4">单机</a>
                      <a href="" class="a_index4">网游</a>
                      <a href="" class="a_index4">手游</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index4">休闲</a>
                      <a href="" class="a_index4">竞技</a>
                      <a href="" class="a_index4">MOBA</a>
                    </p>
                </span>
            </div>
            <hr>
            <div class="div_index">
                <img class="img-index" src="../img/闲趣.png" alt="!">  闲·趣
                <span class="layui-breadcrumb layui-font-black" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index4">萌宠</a>
                      <a href="" class="a_index4">吐槽</a>
                      <a href="" class="a_index4">重口味</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index4">星座</a>
                      <a href="" class="a_index4">恐怖</a>
                      <a href="" class="a_index4">喵星人</a>
                    </p>
                </span>
            </div>

            <hr>
            <div class="div_index">
                <img class="img-index" src="../img/动漫.png" alt="!">  动漫宅
                <span class="layui-breadcrumb layui-font-black" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index3">国产动漫</a>
                      <a href="" class="a_index3">日本动漫</a>
                      <a href="" class="a_index3">玄幻</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index3">搞笑漫画</a>
                      <a href="" class="a_index3">热血动漫</a>
                      <a href="" class="a_index3">推理</a>
                    </p>
                </span>
            </div>
        </div>


    </div>

    <!--        热门吧推荐-->
    <div class="layui-col-xs8 layui-bg-gray" style="margin-top: 10px;height:350px;margin-left: 10px;margin-bottom: 10px; padding: 20px">
        <img class="nav-profile-img" src="../img/热门趣点.png" style="transform: scale(0.7);"/>
        <label style="font-weight: bold" class="mbx">热门趣点推荐</label>
        <div >
<!--            内容部分-->
            <div id="recommend_bar">
                <div class="layui-col-xs3" style="height: 120px; ">
                    <div style="width: 120px;height: 100px;float: left">
                        <img class="nav-profile-img" src="../img/img1.png" style="width: 100px;height: 100px;border-radius:20px"/>
                    </div>
                    <p style="margin-top: 10px;font-weight: bold" >原神</p>
                    <p style="margin-top: 10px"><i class="layui-icon layui-icon-username"></i> 40  </p>
                    <p style="margin-top: 10px"><i class="layui-icon layui-icon-form"></i> 4000 </p>
                </div>
<!--分页器-->
            </div>
            <div class="layui-col-xs12" style="text-align: center"  id="demo-laypage-theme-1" style="height: 120px; ">

            </div>
        </div>
    </div>

    <!--        热门话题-->
    <div class="layui-col-xs8 layui-bg-gray " style="height:auto;margin-left: 10px;padding: 20px">
        <img class="nav-profile-img" src="../img/热点话题.png" style="width: 25px;height :25px;"/>
        <label style="font-weight: bold" class="mbx">热门话题推荐</label>
        <div class="flow-demo layui-col-xs12 layui-collapse " lay-filter="filter-collapse" style="margin-top: 10px" id="ID-flow-demo-manual">
            <div class="layui-colla-item">
                <div class="layui-colla-title">贝爷的新节目荒岛求生也太有节目效果了</div>
                <div class="layui-colla-content">
                    <a href=""><p style="font-size: 20px;font-weight: bold">贝爷的新节目荒岛求生也太有节目效果了
                        <span style="transform: translate(-20px,-20px)" class="layui-icon layui-icon-reply-fill">9</span></p>
                    </a>
                    <p>内容部分</p>
                    <img src="../img/img1.png" alt="">
                </div>
            </div>
        </div>
    </div>

</div>



  <script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    // 热门导航分页器
    layui.use(function(){
        var $ = layui.jquery;
        var layer = layui.layer;
        var laypage = layui.laypage;
        var element = layui.element;
        var flow = layui.flow;
        var barData = [];
        // 自定义热门话题分页器主题
        laypage.render({
            elem: 'demo-laypage-theme-1',
            count: 12,
            limit: 8,
            theme: 'green',
            size:'lg',
            curr: 0,
            jump: function(obj){
                // 请求贴吧数据
                $.ajax({
                    url: '/bar/getAllBarByPage',
                    type:"post",
                    data: {
                        page: obj.curr
                    },
                    dataType:"json",
                    success: function(res){
                        barData = res;
                        var lis = [];
                        for(var i = 0; i < barData.length; i++){
                            lis.push(`
                                <div class="layui-col-xs3" style="height: 120px; ">
                                    <div style="width: 120px;height: 100px;float: left">
                                        <img class="nav-profile-img" src="${barData[i].bimageurl}" style="width: 100px;height: 100px;border-radius:20px"/>
                                    </div>
                                    <p style="margin-top: 10px;font-weight: bold" ><a href="/forward/postIndexHtml?bid=${barData[i].bid}">${barData[i].bname}</a></p>
                                    <p style="margin-top: 10px"><i class="layui-icon layui-icon-username"></i> 40  </p>
                                    <p style="margin-top: 10px"><i class="layui-icon layui-icon-form"></i> 4000 </p>
                                </div>`);
                        }
                        let h = document.getElementById("recommend_bar");
                        h.innerHTML = lis.join('');
                    },
                    error: function(err){
                        layer.msg('请求失败，请检查网络');
                    }
                })
            }
        });

        // 获取趣点数据

        // 流加载实例
        flow.load({
            elem: '#ID-flow-demo-manual', // 流加载容器
            scrollElem: '#ID-flow-demo-manual', // 滚动条所在元素，一般不用填，此处只是演示需要。
            isAuto: false,
            moreText:'查看更多',
            isLazyimg: true,
            done: function(page, next){ // 加载下一页
                // 获取话题数据
                let data = [];
                // page从1开始
                if(page<0)
                    page = 1;
                $.ajax({
                    url: '/topic/getTopicsByPage',
                    type:"post",
                    data: {
                        page: page
                    },
                    dataType:"json",
                    success: function(res){
                        data = res;
                        console.log(res);
                    },
                    error: function(err){
                        layer.msg('请求失败，请检查网络');
                    }
                })
                // 模拟插入
                setTimeout(function(){
                    var lis = [];
                    for(var i = 0; i < data.length; i++){
                        console.log(data[i].timageurl);
                        lis.push(`<div class="layui-colla-item">
                                            <div class="layui-colla-title">${data[i].ttext}</div>
                                            <div class="layui-colla-content">
                                                <a href=""><p style="font-size: 20px;font-weight: bold">贝爷的新节目荒岛求生也太有节目效果了
                                                    <span style="transform: translate(-20px,-20px)" class="layui-icon layui-icon-reply-fill">${data[i].theat}</span></p>
                                                </a>
                                                <p>内容部分</p>
                                                <img src="${data[i].timageurl}">
                                            </div>
                                        </div>`);
                    }
                    console.log(page);
                    next(lis.join(' '), page < 1000); // 假设总页数为 1000
                    element.render('collapse', 'filter-collapse');
                }, 520);
            }
        });


    });

  </script>


</body>
</html>

<style>
    /* styles.css */
    .nav-profile {
        display: flex;
        align-items: center;
    }

    .nav-profile-img {
        position: relative;
        margin-right: 10px;
    }
    a{
        margin-left: 10px;
    }
    .mbx{
        padding: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .span_css{
        margin-top: 20px
    }
    /*标签导航*/
    .a_index1{
        margin-left: 20px;
        margin-top: 20px;
        /*text-decoration: underline;*/
    }
    .a_index3{
        font-size: 13px;
        width: 5em;
        /*margin-left: 20px;*/
        margin-top: 20px;
    }
    a:hover{
        text-decoration: underline;
    }
    .a_index4{
        font-size: 15px;
        width: 4em;
        margin-left: 10px;
        margin-top: 20px;
        text-align: center;
    }
    .p_index{
        color: black;
        margin-top: 10px;
    }
    .div_index{
        padding: 10px;
    }
    .p_index_color {
        background-color: #dbfbf0; /* 鼠标移入时的背景颜色 */
    }
    /*标签图片*/
    .img-index{
        width: 20px;
        height: 20px;
    }
    hr{
        padding: 0;
        margin: 0;
    }
    .logo_img{
        width: 40px;
        height: 30px;
    }
</style>

<script>
    // 获取所有需要添加鼠标事件的p元素
    var pElements = document.getElementsByClassName('div_index');

    // 遍历每个p元素并添加事件监听器
    for (var i = 0; i < pElements.length; i++) {
        var h = pElements[i]; // h 是当前遍历到的元素
        // 添加事件监听器到 h（即 pElements[i]）
        h.addEventListener('mouseover', function() {
            this.classList.add('p_index_color'); // 添加绿色背景样式类
        });
        h.addEventListener('mouseout', function() {
            this.classList.remove('p_index_color'); // 移除绿色背景样式类
        });
    }
</script>
